<template>
  <view class="feedcbackIndex">
    <!-- 选择问题选项 -->
    <view class="selectContainer">
      <text class="selectTitle">选择问题类型</text>
      <view class="questionContainer">
        <view
          v-for="(item, index) in selectQuestion"
          :key="index"
          class="selectQuestion"
          :class="{
            add_selectQuestion:
              checkedQuestion.indexOf(item) > -1 ? true : false,
          }"
          @click="handlerQuestion(index)"
        >
          {{ item }}
        </view>
      </view>
    </view>
    <!-- 文本域输入框 -->
    <view class="feedbackDetail">
      <textarea
        class="importText"
        v-model="feedbackDetail"
        placeholder="请描述一下您的问题"
      ></textarea>
    </view>
    <!-- 上传图片 -->
    <view class="uploadContainer">
      <view class="uploadImgTitle">上传图片 ({{uploadImg.length}}/4)</view>
      <view class="imageContainer">
        <view class="addUpload" style="margin-right: 10rpx" @click="addUploadImg">+</view>
        <view class="uploadImage" v-for="(item,index) in uploadImg" :key="index">
          <image
            :src="item"
            style="width: 100%; height: 100%"
          ></image>
          <view class="iconfont feichu" @click="delImg(index)"
            ><text style="margin-top: -5rpx; font-size: 40rpx">+</text></view
          >
        </view>
      </view>
    </view>
		<!-- 点击提交按钮 -->
		<view class="submit">
			提交
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      selectQuestion: ["功能问题", "性能问题", "体验问题", "其他"],
      checkedQuestion: [],
      feedbackDetail: "",
			uploadImg:[],
    };
  },
  methods: {
    handlerQuestion(index) {
      // 点击问题选项,会变红色,再点就会取消
      let i = this.checkedQuestion.indexOf(this.selectQuestion[index]);
      if (i === -1) {
        this.checkedQuestion.push(this.selectQuestion[index]);
      } else {
        this.checkedQuestion.splice(i, 1);
      }
    },
		// 点击上传图片(没有借口,但是可以镜像一个src,类似于createObjectUrl)
	async	addUploadImg(){
			// 判断上传图片是不是已经大于等于4张
				if(this.uploadImg.length>=4){
					// 给一个提示不能再上传
					uni.showToast({
						icon:"none",
						title:"上传数目超过限制"
					})
				}else{
				let [err,res]=await	uni.chooseImage({
					count:4 - this.uploadImg.length,
				})
				this.uploadImg.push(...res.tempFilePaths)
				console.log(this.uploadImg)
				}
		},
		delImg(i){
			this.uploadImg.splice(i,1)
		}
  },
};
</script>

<style lang="less">
.feedcbackIndex {
  height: 100vh;
  background-color: #f9f9f9;
  padding: 20rpx 19rpx 0 20rpx;
  box-sizing: border-box;
  .selectContainer {
    width: 711rpx;
    height: 203rpx;
    border-radius: 8rpx;
    background-color: #fff;
    padding: 15rpx 47rpx 0 29rpx;
    box-sizing: border-box;
  }
  .selectTitle {
    font-size: 26rpx;
    color: #434343;
  }
  .questionContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20rpx;
  }
  .selectQuestion {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 181rpx;
    height: 46rpx;
    background-color: #ededed;
    font-size: 20rpx;
    color: #545353;
    border-radius: 23rpx;
    margin-bottom: 10rpx;
  }
  .add_selectQuestion {
    border: 1rpx solid #7d00ff;
    background-color: #ffe6e6;
    color: #7d00ff;
  }
  .feedbackDetail {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    width: 711rpx;
    height: 391rpx;
    border-radius: 8rpx;
    box-sizing: border-box;
    padding: 20rpx;
    background-color: #fff;
  }
  .importText {
    width: 100%;
    height: 100%;
    font-size: 26rpx;
  }
  .uploadContainer {
    width: 711rpx;
    height: 216rpx;
    background-color: #fff;
    padding: 20rpx 17rpx 13rpx 18rpx;
    border-radius: 8rpx;
    box-sizing: border-box;
  }
  .uploadImgTitle {
    color: #434343;
    font-size: 26rpx;
    margin-left: 20rpx;
    margin-bottom: 18rpx;
  }
  .imageContainer {
    width: 100%;
    height: 128rpx;
    display: flex;
  }
  .addUpload {
    line-height: 128rpx;
    text-align: center;
    width: 128rpx;
    height: 128rpx;
    background-color: #d8d8d8;
    font-size: 60rpx;
    color: #a6a6a6;
  }
  .uploadImage {
    position: relative;
    width: 128rpx;
    height: 128rpx;
  }
  .feichu {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44rpx;
    height: 44rpx;
    color: #fff;
    right: -20rpx;
    top: -20rpx;
    border-radius: 50%;
    background-color: #7d00ff;
    transform: rotate(45deg);
  }
	.submit{
		width: 711rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 30rpx;
		background-color: #7d00ff;
		border-radius: 34rpx;
	}
}
</style>
